<template>
	<view class="content">
		<view class="text-area">
			<xpj-table 
				:data="data" 
				:header="header" 
				:height="400" 
				:fixed="true" 
				:firstFixed="true" 
				:border="true" 
				:stripe="true"
				@row-click="clickRow"
				:showActions="false"
				@load-more="loadMoreItems"
			>
			</xpj-table>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				data: [ {
					date: '2016-05-03',
					name: '王小虎',
					sex: '男',
					age: '18',
					address: '上海市普陀区金沙江路 1516 弄'
				}, {
					date: '2016-05-03',
					name: '王小虎',
					sex: '男',
					age: '18',
					address: '上海市普陀区金沙江路 1516 弄'
				}, {
					date: '2016-05-03',
					name: '王小虎',
					sex: '男',
					age: '18',
					address: '上海市普陀区金沙江路 1516 弄'
				}, {
					date: '2016-05-04',
					name: '王小虎',
					sex: '男',
					age: '18',
					address: '上海市普陀区金沙江路 1517 弄'
				}, {
					date: '2016-05-01',
					name: '王小虎',
					sex: '男',
					age: '18',
					address: '上海市普陀区金沙江路 1519 弄'
				}, {
					date: '2016-05-03',
					name: '王小虎',
					sex: '男',
					age: '18',
					address: '上海市普陀区金沙江路 1516 弄'
				}, {
					date: '2016-05-03',
					name: '王小虎',
					sex: '男',
					age: '18',
					address: '上海市普陀区金沙江路 1516 弄'
				}, {
					date: '2016-05-03',
					name: '王小虎',
					sex: '男',
					age: '18',
					address: '上海市普陀区金沙江路 1516 弄'
				}, {
					date: '2016-05-03',
					name: '王小虎',
					sex: '男',
					age: '18',
					address: '上海市普陀区金沙江路 1516 弄'
				}, {
					date: '2016-05-03',
					name: '王小虎',
					sex: '男',
					age: '18',
					address: '上海市普陀区金沙江路 1516 弄'
				},{
					date: '2016-05-04',
					name: '王小虎',
					sex: '男',
					age: '18',
					address: '上海市普陀区金沙江路 1517 弄'
				}, {
					date: '2016-05-01',
					name: '王小虎',
					sex: '男',
					age: '18',
					address: '上海市普陀区金沙江路 1519 弄'
				},{
					date: '2016-05-03',
					name: '王小虎',
					sex: '男',
					age: '18',
					address: '上海市普陀区金沙江路 1516 弄'
				}],
				header: [
					{title: '姓名', prop: 'name', width: '100', align: 'left'},
					{title: '性别', prop: 'sex', width: '100', align: 'left'},
					{title: '年龄', prop: 'age', width: '100', align: 'center'},
					{title: '日期', prop: 'date', width: '100', align: 'left'},
					{title: '地址', prop: 'address', width: '200', align: 'left', overflow: true},
				]
			}
		},
		mounted() {
			this.loadData()
		},
		methods: {
			clickRow(row) {
				console.log(row, 'row');
			},
			loadData() {
				setTimeout(() => {
					let arr = [
						{
							date: '2016-05-03',
							name: '王小虎',
							sex: '男',
							age: '18',
							address: '上海市普陀区金沙江路 1516 弄'
						},
						{
							date: '2016-05-03',
							name: '王小虎',
							sex: '男',
							age: '18',
							address: '上海市普陀区金沙江路 1516 弄'
						},
						{
							date: '2016-05-03',
							name: '王小虎',
							sex: '男',
							age: '18',
							address: '上海市普陀区金沙江路 1516 弄'
						},
						{
							date: '2016-05-03',
							name: '王小虎',
							sex: '男',
							age: '18',
							address: '上海市普陀区金沙江路 1516 弄'
						}
					]
					this.data = [...this.data, ...arr]
				}, 2000)
			},
			loadMoreItems() {
			  this.loadData();
			},
		}
	}
</script>

<style>
	
</style>
